cucDefine(['common'], function (common) {
    let {loadStyle, commonInit, commonVar} = common;
    class TableJH extends HTMLElement {
        constructor() {
            super();
            let shadow = this.attachShadow({mode: 'open'});
            loadStyle(shadow, commonVar.rootPath + "/assets/component/table/table.css");
            this.tableRoot = this.initTable(this.getAttribute('theme'));
            commonInit(this, this.tableRoot);
            shadow.appendChild(this.tableRoot);
            this.onMounted();
        }
        initTable(theme) {
            let tableRoot = document.createElement('table');
            this.scrollBar = document.createElement('div');
            this.scrollBar.className = 'scroll-bar'
            tableRoot.setAttribute('cellspacing', '0');
            tableRoot.setAttribute('cellpadding', '0');
            tableRoot.className = "jh-table-" + theme;
            let thead = this.initTHead();
            let tbody = this.initTBody();
            let ttitle = this.initTTitle();
            thead && tableRoot.appendChild(thead);
            tbody && tableRoot.appendChild(tbody);
            ttitle && tableRoot.insertBefore(ttitle, thead);
            // add scrollBar
            if(tbody){
                tableRoot.appendChild(this.scrollBar);
            }
            return tableRoot;
        }
        initTTitle() {
            if(this.hasAttribute('ttitle')) {
                let temp = this.getAttributeOf('ttitle');
                let ttitle = document.createElement('thead');
                ttitle.className = "jh-ttitle";
                let tr = document.createElement('tr');
                let th = document.createElement('th');
                th.colSpan = this.tableColLength;
                this.injectCellData(th, temp);
                tr.appendChild(th);
                ttitle.appendChild(tr);
                return ttitle;
            } else {
                return null;
            }
        }
        initTHead() {
            let thead = document.createElement('thead');
            thead.className = "jh-thead";
            let theadContent = this.getAttributeOf('thead');
            this.tableColLength = 0;
            // count the sum of col
            for(let content of theadContent){
                for(let item of content){
                    let temp = item;
                    if(typeof temp == "string"){
                        this.tableColLength += 1;
                    } else {
                        temp.colspan ? this.tableColLength += temp.colspan : this.tableColLength += 1;
                    }
                }
            }
            this.injectFormData(thead, theadContent);
            return thead;
        }
        initTBody() {
            let tbody = document.createElement('tbody');
            tbody.className = "jh-tbody";
            this.hasAttribute('interColor') ? tbody.setAttribute('interColor','') : '';
            if(this.hasAttribute('minrow')) {
                this.minrow = this.getAttribute('minrow');
                tbody.style.maxHeight = this.minrow * 45 + 'px';
            }
            let tbodyContent = this.getAttributeOf('tbody')
            this.injectFormData(tbody, tbodyContent);
            // scroll event
            let timer, oldV, pos, oldY, flag = false;
            tbody.addEventListener("scroll",(e)=>{
                this.pos = e.target.scrollTop;
                !timer && (timer = setInterval(()=>{
                    this.pos;
                },3000));
            });
            this.scrollBar.onmousedown = (e)=>{
                clearInterval(timer);
                timer = 0;
                oldY = pos - e.clientY;
                flag = true;
                e.preventDefault = true;
            };
            this.onmousemove = (e)=>{
                if(flag){
                    this.scrollBar.style.marginTop = -45 * this.minrow + Math.max(Math.min(e.clientY + oldY,this.minrow * 45 - 30),0) + "px";
                    tbody.scrollTop = (e.clientY + oldY) * ((tbodyContent.length - this.minrow) * 45)/(45 * this.minrow - 30);
                    e.preventDefault = true;
                }
            };
            this.onmouseup = (e)=>{
                this.scrollBar.style.opacity = 0;
                flag = false;
                e.preventDefault = true;
            };
            this.onmouseleave = (e)=>{
                this.scrollBar.style.opacity = 0;
                flag = false;
                e.preventDefault = true;
            };
            Object.defineProperty(this, 'pos', {
                set(value) {
                    this.scrollBar.style.marginTop = -45 * this.minrow + Math.max(Math.min(value * (this.minrow * 45 - 30)/((tbodyContent.length - this.minrow) * 45),(this.minrow * 45 - 30)),0) + "px";
                    this.scrollBar.style.opacity = 1;
                    pos = value;
                },
                get() {
                    console.log(oldV, pos)
                    if(oldV == pos) {
                        clearInterval(timer);
                        this.scrollBar.style.opacity = 0;
                        timer = 0;
                    } else {
                        oldV = pos;
                    }
                    return pos;
                }
            });
            tbody.addEventListener("scroll",this.onscroll);
            return tbody;
        }
        injectCellData(dom, temp) {
            if(typeof temp == "string"){
                dom.innerText = temp;
                dom.style.textAlign = "left";
            } else {
                if(temp.mode == "html"){
                    dom.innerHTML = temp.text;
                } else {
                    dom.innerText = temp.text;
                }
                temp.align && (dom.style.textAlign = temp.align);
                temp.colspan && (dom.colSpan = temp.colspan);
                temp.rowspan && (dom.rowSpan = temp.rowspan);
            }
        }
        injectFormData(dom, data) {
            for(let content of data){
                let tr = document.createElement('tr');
                for(let item of content){
                    let th = document.createElement(dom.tagName == 'TBODY' ? 'td' : 'th');
                    this.injectCellData(th, item);
                    tr.appendChild(th);
                }
                dom.appendChild(tr);
            }
        }
        getAttributeOf(name) {
            if(this.hasAttribute(name)) {
                let temp = this.getAttribute(name).replace(/\'/g,'"');
                try {
                    temp = JSON.parse(temp);
                } catch (error) {
                    try {
                        eval("temp = "+temp)
                    } catch(error) {
                        temp = temp;
                    }
                }
                return temp;
            } else {
                return null;
            }
        }
        onMounted() {
            // add style of table
            for(let key of this.style){
                this.tableRoot.style[key] = this.style[key];
            }
            // fixed position of scrollBar
            this.scrollBar.style.marginLeft = this.tableRoot.clientWidth - 48 - 2 - 10 + "px";
            setTimeout(()=>{
                this.scrollBar.style.marginLeft = this.tableRoot.clientWidth - 48 - 2 - 10 + "px";
            },1000);
            window.onresize = ()=>{
                this.scrollBar.style.marginLeft = this.tableRoot.clientWidth - 48 - 2 - 10 + "px";
            };
        }
    }
    return TableJH;
});
